body {
    font-family: -apple-system, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
    line-height: 1.7;
    font-size: 16px;
    color: #404040;
    overflow-x: hidden;
    word-break: break-all;
    margin-top: 60px;
    margin-bottom: 60px;
}

.container {
    background-color: #f5f5f5;
}

.bgorange {
    background-color: rgb(109, 191, 154);
    /*background-color: rgb(235, 97, 31);*/

}

.orange {
    color: rgb(109, 191, 154);
    /*color: rgb(235, 97, 31);*/
}

/* About */

.about .header {
    height: 60px;
    text-align: center;
}

.about .header .icon {
    width: 36px;
    height: 36px;
    margin-top: 12px;
}

.about .top {
    background-color: #FFFFFF;
    text-align: center;
    padding: 40px;
}

.about .top .name {
    font-size: 62px;
    color: rgb(51, 51, 51);
    font-weight: bold;
}

.about .top .name i {
    font-size: 30px;
}

.about .top .position {
    font-size: 20px;
    color: rgb(141, 141, 142);
}

/* listing */
.about .listing {
    background-color: #f0f0f0;
    height: 290px;
}

.about .listing .objective {
    padding-top: 10px;
    padding-bottom: 10px;

}

.about .listing .objective p {
    color: rgb(141, 141, 142);
    font-size: 16.504px;
    word-break: break-all;
}

.about .listing .objective h4 {
    font-weight: bold;
    color: rgb(81, 83, 86);
}

.about .listing .contactInfo {
    height: 100%;
    padding-top: 47px;
    padding-left: 35px;
    background-color: #e3e3e2;
}

.about .listing .contactInfo:before {
    display: block;
    content: "";
    border-width: 8px 8px 8px 8px;
    border-style: solid;
    border-color: transparent transparent #e3e3e2 transparent;

    /* 定位 */
    position: absolute;
    left: 47%;
    top: -16px;
}

.about .listing .socialIcons {
    height: 100%;
    padding-top: 47px;
    padding-left: 35px;
}

.about .listing .contactInfo i {
    width: 34px;
}

.about .listing .socialIcons i {
    padding-right: 15px;
}

/* Experience*/
.experience h2 {
    font-weight: bold;
    padding: 30px 15px;
}

.experience .project {
    border-top: 3px solid rgb(109, 191, 154);
    padding: 10px 30px;
}

.experience .project .name {
    font-weight: bold;
}

.experience .project .address {
    color: #8d8d8d;
}

.experience .project .line {
    color: #8d8d8d;
    padding: 0 30px;
}

.experience .project .year {
    color: rgb(109, 191, 154);
}
.attention{
    background: #a6bc86;
    padding: 6px;
    border-radius: 7px;
}
.lrdt .col-md-3,.bqb .col-md-3{
    padding-bottom: 10px;
}
.lrdt  img,.bqb  img{
    width: 100%;
}
/*works*/
.works h2 {
    font-weight: bold;
    padding: 30px 15px;
}
/* Intro */
.intro {
    margin: 30px 30px 50px 30px;
}

/* Education */
.education {
    border: 1px solid rgb(109, 191, 154);
    text-align: center;
    background-color: #FFFFFF;
    height: 490px;
}

.education .top h2 {
    background-color: rgb(109, 191, 154);
    margin: 0;
    padding: 12px;
    font-weight: bold;
    color: #fff;
}

.education .school {
    margin: 30px;
}

.education .school h4 {
    color: rgb(141, 141, 142);
}

.education .trainings {
    padding:20px 30px 20px 30px;
}

.education .trainings h2 {
    margin:0;
    color: rgb(109, 191, 154);
    font-weight: bold;
}

.education .trainings h4 {

    color: rgb(100, 100, 99);
}

.education .training {
    border: 1px solid rgb(109, 191, 154);
    border-radius: 99em;
    padding: 10px 5px;
    color: rgb(141, 141, 142);
}

/*Languages*/
.languages {
    text-align: center;
    background-color: #FFFFFF;
}

.languages .top h2 {
    margin: 0;
    padding: 12px;
    font-weight: bold;
}

.languages .language {
    margin: 10px 20px 10px 20px;
    background-color: #f5f5f5;
    border-radius: 99em;
}

.languages .language .col-lg-4 {
    padding: 0;
}

.languages .language .col-lg-4 p {
    margin: 5px;
    font-size: 14px;
    font-weight: bold;
}

.languages .language .col-lg-4:first-of-type {
    color: #FFFFFF;
    background-color: rgb(109, 191, 154);
    border-radius: 99em;
}

.languages .star {
    padding: 0px 20px 10px 20px;
}

.languages .star .col-lg-4 {
    padding: 0;
    font-size: 12px;
    color: #dddddd;
}

/*Awards*/
.awards {
    margin-top: 39px;
    margin-bottom: 39px;
    text-align: left;
    background-color: #FFFFFF;
}

.awards .top h2 {
    margin: 0;
    padding: 12px;
    font-weight: bold;
    padding-left: 20px;
    border-right: 2px solid rgb(109, 191, 154);
}

.awards .award {
    padding: 10px;
    border-right: 2px solid #dddddd;;
}

.awards .award p {
    margin: 0;
    color: rgb(141, 141, 141);
}

/* Thanks */
.thanks {
    text-align: center;
    background-color: #FFFFFF;
}

.thanks .top h4 {
    margin: 0;
    padding: 20px 12px;
    font-weight: bold;
}

.thanks p {
    margin: 0;
    color: rgb(141, 141, 142)
}

.thanks .name {
    color: rgb(109, 191, 154);
    padding: 10px;
}

/* Skills */
.skills {
    text-align: center;
    background-color: #FFFFFF;
    height: 490px;
}

.skills .top h2 {
    margin: 0;
    padding: 12px;
    font-weight: bold;
    border-bottom: 1px solid #dddddd;
}

.skills .skill {
    padding:20px 15px 5px 15px;
    font-weight:bold;
}

/* Skills Icon */
.skillsIcon {
    text-align: center;
    background-color: #FFFFFF;
    height: 490px;
}

.skillsIcon .top h2 {
    background-color: rgb(109, 191, 154);
    color: #FFFFFF;
    margin: 0;
    padding: 12px;
    font-weight: bold;
}

.skillsIcon .icon{
    padding:20px 15px 5px 15px;
}


/* designer */
.designer p{
    text-align: center;
    color: rgb(141, 141, 141);
}
.simulator-wrapper{
    display: none;
    position: fixed;
    top: 3%;
    right: 2%;
}
.simulator-wrapper .title{
    position: absolute;
    left: 50%;
    top: 59px;
    width: 180px;
    margin-left: -90px;
    color: #fff;
    text-align: center;
}
.simulator-wrapper iframe{
    position: absolute;
    top: 116px;
    left: 1px;
    border: 0;
    background: #fff;
    width: 320px;
    height: 504px;
}
.mobile-simulator {
    width: 323px;
    height: 675px;
    background: url(../img/mobile-simulator.png) no-repeat center center;
    margin: 15px auto;
    position: relative;
}